<template>
    <div ref="chart" style="width: 450px; height: 380px;"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);
let myChart = null;

const initChart = () => {
    myChart = echarts.init(chart.value);

    const option = {
        title: {
            text: '每日签到统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天',
                '第8天', '第9天', '第10天', '第11天', '第12天', '第13天',
                '第14天', '第15天', '第16天', '第17天', '第18天', '第19天',
                '第20天', '第21天', '第22天', '第23天', '第24天', '第25天',
                '第26天', '第27天', '第28天', '第29天', '第30天'
            ]
        },
        yAxis: {
            type: 'value',
            max: 200 // 设置 Y 轴最大值为总人数
        },
        series: [
            {
                name: '签到人数',
                type: 'line',
                data: [
                    120, 135, 145, 160, 150, 170, 155,
                    140, 130, 165, 155, 138, 125,
                    142, 157, 133, 160, 118, 140,
                    110, 152, 145, 160, 128, 135,
                    145, 112, 160, 139, 122, 150 // 示例数据
                ],
                smooth: true,
                itemStyle: {
                    color: '#36A2EB'
                }
            }
        ]
    };

    myChart.setOption(option);
};

const resizeChart = () => {
    if (myChart) {
        myChart.resize();
    }
};

onMounted(() => {
    initChart();
    window.addEventListener('resize', resizeChart); // 添加窗口大小变化监听
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart); // 移除监听器
    echarts.dispose(chart.value);
});
</script>

<style scoped>
/* 可以添加样式来美化图表 */
</style>
